<template>
  <div class="app-container clue1-page">

    <!-- 搜索表单区域 -->
    <el-form
      :inline="true"
      :model="searchForm"
      class="form-search"
      size="small"
      style="margin-top:20px"
    >
      <el-form-item>
        <el-input v-model="searchForm.colName" placeholder="藏品名称"></el-input>
      </el-form-item>
      <el-form-item>
        <el-input
          v-model="searchForm.colId"
          placeholder="藏品编号"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-select
          v-model="searchForm.year"
          placeholder="请选择年代"
          clearable
          :style="{ width: '100%' }"
        >
          <el-option
            v-for="(item, index) in yearList"
            :key="index"
            :label="item.yearName"
            :value="item.yearName"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" size="mini" icon="el-icon-search" @click="getAllRegister">查询</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="reset">重置</el-button>
      </el-form-item>
    </el-form>
    <!-- 表格区域 -->
    <el-table v-loading="loading" :data="tableData" border stripe style="width: 100%">
      <el-table-column
        type="selection"
        width="55"
      >
      </el-table-column>
      <el-table-column
        type="index"
        width="50"
      >
      </el-table-column>
      <el-table-column prop="colId" label="藏品登记号"></el-table-column>
      <el-table-column prop="colName" label="藏品名称"></el-table-column>
      <el-table-column prop="gradeId" label="藏品级别"></el-table-column>
      <el-table-column prop="type" label="藏品类型"></el-table-column>
      <el-table-column prop="number" label="藏品数量"></el-table-column>
      <el-table-column prop="quality" label="藏品质量"></el-table-column>
      <el-table-column prop="come" label="藏品来源"></el-table-column>
      <el-table-column prop="status" label="保存状态"></el-table-column>
      <el-table-column prop="yearId" label="年代"></el-table-column>
      <el-table-column prop="colDesc" label="藏品描述"></el-table-column>
      <el-table-column prop="intime" label="入藏时间"></el-table-column>
      <!--  -->
      <el-table-column align="center" label="操作" width="180">
        <template slot-scope="scope">
          <el-button
            type="primary"
            plain
            size="small"
            @click="check(scope.row.id)"
          >
            审核
          </el-button>
          <el-button
            type="primary"
            plain
            size="small"
            @click="showDetailDialog(scope.row.id)"
          >
            查看
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页区域 -->
    <div class="pagination-warp">
      <el-pagination
        :current-page="current"
        :page-sizes="[5, 10, 15, 20]"
        :page-size="limit"
        :total="total"
        layout="total, sizes, prev, pager, next, jumper"
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      >
      </el-pagination>
    </div>
    <ClueAddDialog></ClueAddDialog>
    <el-dialog
      class="myclue-detail"
      title="审核信息"
      width="30%"
      :visible.sync="timeline.dialogVisible"
      @open="open"
    >
      <el-timeline>
        <el-timeline-item
          v-for="(activity, index) in activities"
          :key="index"
          :icon="activity.icon"
          :type="activity.type"
          :color="activity.color"
          :size="activity.size"
          hide-timestamp
        >
          <h4>{{ activity.content }}</h4>
          <p>{{ activity.time }}</p>
          <p>{{ activity.user }}</p>
          <p>{{ activity.desc }}</p>
        </el-timeline-item>
      </el-timeline>
    </el-dialog>
  </div>
</template>

<script>
import {
  ConfirmcommitCol,
  getAllThreeRegister,
  getOthers,
  clueInfo
} from '@/api/clue/register';
import ClueAddDialog from '../components/Form';
export default {
  components: { ClueAddDialog },
  data() {
    return {
      yearList: [],
      loading: false, // 加载遮罩
      dialogAddVisible: false,
      tableData: [], // 表格数据
      current: 1, // 当前页
      limit: 10, // 一页几个
      total: 0, // 总数
      searchForm: {
        colId: '',
        colName: '',
        year: ''
      },
      activeIndex: '0',
      timeline: {
        currentClueId: '',
        dialogVisible: false
      },
      activities: []
    };
  },
  created() {
    this.getAllRegister();
    this.getOthers();
  },
  methods: {
    async showDetailDialog(clueId) {
      this.timeline.currentClueId = clueId;
      this.timeline.dialogVisible = true;
      this.getCLueInfo();
    },
    async getCLueInfo() {
      const { data: res } = await clueInfo(this.timeline.currentClueId);
      const activities = res.data.activities;
      // 写的过滤数据的垃圾代码
      const arr = [
        { content: '初次审核' },
        { content: '最终审核' },
        { content: '审核完成' }
      ];
      for (let i = 0; i < activities.length; i++) {
        if (activities[i].clueUser) {
          arr[i].time = activities[i].clueTime;
          arr[i].user = '处理人：' + activities[i].clueUser;
          arr[i].desc = '意见：' + activities[i].desc;
        }
        const status = activities[i].status;
        if (status === -1) {
          arr[i].type = 'danger';
          arr[i].size = 'large';
        } else if (status === 0) {
          // 看看上一个是不是未审核
          if (
            i !== 0 &&
            (activities[i - 1].status === 0 || activities[i - 1].status === -1)
          ) {
            continue;
          } else {
            arr[i].type = 'primary';
            arr[i].size = 'large';
            arr[i].icon = 'el-icon-more';
          }
        } else if (status === 1) {
          arr[i].type = 'success';
        }
      }
      this.activities = arr;
    },
    check(id) {
      this.$prompt('请输入建议', '审核', {
        distinguishCancelAndClose: true,
        confirmButtonText: '同意',
        cancelButtonText: '拒绝',
        cancelButtonClass: 'el-button--danger',
        inputValidator: val => {
          this.commitDesc = val;
          return true;
        }
      })
        .then(async ({ value }) => {
          const { data: res } = await ConfirmcommitCol({
            id: id,
            desc: value,
            status: 1
          });
          if (res.code === 200) {
            this.getAllRegister();
            this.$message({
              type: 'success',
              message: res.message
            });
          }
        })
        .catch(async (action, instance) => {
          if (action !== 'cancel') return;
          console.log(action, instance);
          const { data: res } = await ConfirmcommitCol({
            id: id,
            desc: this.commitDesc,
            status: -1
          });
          if (res.code === 200) {
            this.getAllRegister();
            this.$message({
              type: 'success',
              message: res.message
            });
          }
        });
    },
    reset() {
      this.searchForm = {
        roleId: null,
        userName: '',
        userPhone: ''
      };
    },
    async getOthers() {
      const { data: res } = await getOthers();
      console.log(res);
      if (res.code === 200) {
        this.yearList = res.data.yearList;
      } else {
        this.$message.error('下拉框获取失败');
      }
    },
    /**
       * 处理分页修改
       */
    handleSizeChange(val) {
      this.limit = val;
    },
    handleCurrentChange(val) {
      this.current = val;
    },
    handleClick() {},
    /**
       * 获取全部线索
       */
    async getAllRegister() {
      this.loading = true;
      const { data: res } = await getAllThreeRegister(
        this.current,
        this.limit,
        this.searchForm
      );
      console.log('api=获取全部线索', res);
      this.tableData = res.data.ClueList;
      this.total = res.data.total;
      this.loading = false;
    },
    /**
       * 重置查询
       */
    resetSearch() {
      this.searchForm = {
        roleId: null,
        userName: '',
        userPhone: ''
      };
    }
  }
};
</script>

<style lang="scss">
  .form-search {
    .el-input {
      width: 180px;
    }
  }
</style>

<style lang="scss" scoped>
  .clue1-page {
    .pagination-warp {
      margin-top: 20px;
      position: relative;
      .el-pagination {
        position: absolute;
        right: 0;
        top: 0;
      }
    }

    .el-table {
      margin-top: 10px;
    }

    .btn-box {
      display: flex;
      justify-content: space-between;
    }

    .demo-table-expand {
      font-size: 0;
    }
    .demo-table-expand label {
      width: 90px;
      color: #99a9bf;
    }
    .demo-table-expand .el-form-item {
      margin-right: 0;
      margin-bottom: 0;
      width: 50%;
    }
  }
</style>
